<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            /* display: none; */
        }
    </style>
</head>

<body>
    <button>显示/隐藏</button>
    <div class="box"></div>

    <script>
        const boxEle = document.querySelector('.box');
        const buttonEle = document.querySelector('button');

        buttonEle.onclick = function () {

            if (boxEle.style.display === 'none') {
                boxEle.style.display = 'block';
            } else {
                boxEle.style.display = "none";
            }
            // console.log(boxEle.style.display);
        }


        // // DOM0 语法
        // boxEle.onclick = function () {
        //     console.log("DOM0");
        // }
        // // 删除
        // boxEle.onclick = null;

        // DOM2 语法
        function clickEvent() {
            console.log("DOM2");
        }
        boxEle.addEventListener("click", clickEvent);
        boxEle.removeEventListener("click", clickEvent);


    </script>
</body>

</html>